import React,{useState} from 'react'
import './header.css'
import { Link} from 'react-router-dom'

 function Header(props) {
    const [classIndex,setClassIndex] = useState(0)

    function changeClass(e){
        setClassIndex(e.currentTarget.getAttribute("data-index"));
        switch (classIndex) {
            case 0:
                props.getHeaderName("客户概况")
                break;
            case "1":
                props.getHeaderName("客户分析")
                break;
            case "2":
                props.getHeaderName("跟单统计")
                break;
            case "3":
                props.getHeaderName("订单统计")
                break;
            case "4":
                props.getHeaderName("合同统计")
                break;
            case "5":
                props.getHeaderName("售后统计")
                break;
            case "6":
                props.getHeaderName("工单统计")
                break;
            case "7":
                props.getHeaderName("年度曲线")
                break;
            case "8":
                props.getHeaderName("详细数据")
                break;
            default:
                props.getHeaderName("客户概况")
                break;
        }
    }

    return (
        <div id='header'>
            <div className='leftTitle'>
              {/* eslint-disable-next-line */}
              <Link to="/home/cusState" className={"0"==classIndex?"active":""} onClick={changeClass} data-index="0"><span>客户概况</span></Link>
			  <Link to="/home/cusAnalysis" className={"1"===classIndex?"active":""} onClick={changeClass} data-index="1"><span>客户分析</span></Link>
			  <Link to="/home/genToGong" className={"2"===classIndex?"active":""} onClick={changeClass} data-index="2"><span>跟单统计</span></Link>
              <Link to="/home/genToGong" className={"3"===classIndex?"active":""} onClick={changeClass} data-index="3"><span>订单统计</span></Link>
              <Link to="/home/genToGong" className={"4"===classIndex?"active":""} onClick={changeClass} data-index="4"><span>合同统计</span></Link>
              <Link to="/home/genToGong" className={"5"===classIndex?"active":""} onClick={changeClass} data-index="5"><span>售后统计</span></Link>
              <Link to="/home/genToGong" className={"6"===classIndex?"active":""} onClick={changeClass} data-index="6"><span>工单统计</span></Link>
              <Link to="/home/yearCurve" className={"7"===classIndex?"active":""} onClick={changeClass} data-index="7"><span>年度曲线</span></Link> 
              <Link to="/home/detailData" className={"8"===classIndex?"active":""} onClick={changeClass} data-index="8"><span>详细数据</span></Link> 
            </div>
        </div>
    )
}


export default Header
